<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>商品管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,address=no"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/main.css"/>
    <style>
        .pics img{
            width: 1.4rem;
            height: 1.4rem;
        }
        .page{
            height: 100%;
        }
        .pics{
            position: relative;
        }
        .pics .delete{
            position: absolute;
            right: 0;
            top: 0;
            background: rgba(0,0,0,.5);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            width: .34rem;
            height: .34rem;
            border-radius: 50%;
            font-size: .26rem;
        }
    </style>
</head>
<body class="add_goods">
    <article class="page page1">
        <section class="bigBox">
            <content class="container">
                <div class="ptb40 flex_aj"><img src="../img/ico11.png" style="width: 6.18rem;"></div>
                <div class="plr24">
                    <div class="plr30 bw border-r1">
                        <label class="flex_a lh110 bdb">
                            <span>商品名称:</span>
                            <input type="text" class="flex1 ml20" placeholder="请输入(20字)" maxlength="20" id="name">
                        </label>
                        <label class="flex_a lh110 bdb">
                            <span>商品价格:</span>
                            <input type="number" class="flex1 ml20" placeholder="请输入" id="price">
                        </label>
                        <label>
                            <p class="lh110">商品描述:</p>
                            <textarea class="pw100 pb30" cols="30" rows="10" placeholder="请输入（限500字）" maxlength="500" id="remark"></textarea>
                        </label>
                    </div>
                </div>
            </content>
            <footer class="lh100 bgc1 colw tac font15 btn_tap bind_page" data-index='2'>下一步</footer>
        </section>
    </article>
    <article class="page page2 dpn">
        <section class="bigBox">
            <content class="container">
                <div class="ptb40 flex_aj"><img src="../img/ico12.png" style="width: 6.18rem;"></div>
                <div class="plr24">
                    <div class="plr30 bw border-r1 shadow">
                        <p class="font17 pt30">商品主图</p>
                        <p class="mt10 col9">说明：用于商品在商城列表中显示，和商品详情页上轮播展示</p>
                        <div class="mt30">
                            <p>展示小图 <span class="col9">(1张)</span></p>
                            <div class="pic_box font0">
                                <div class="pics single_pic dib mb24 oh"></div>
                                <form enctype="multipart/form-data" method="post" id="imgUrl_form" class="dib">
                                    <label class="db">
                                        <input type="file" name="files" hidden id="imgUrl"/>
                                    </label>
                                </form>
                            </div>
                        </div>
                        <div class="mt30">
                            <p>轮播图 <span class="col9">(5张)</span></p>
                            <div class="pic_box font0 carouselImgUrl_wrap">
                                <!--<div class="pics carouselImgUrl dib mb24 oh mr20 mr20">-->
                                    <!--<img src="../img/test.png">-->
                                    <!--<div class="delete">&times;</div>-->
                                <!--</div>-->
                                <form enctype="multipart/form-data" method="post" id="carouselImgUrl_form" class="dib">
                                    <label class="a-upload" class="fl" style="position: relative;">
                                        <input type="file" name="files" id="carouselImgUrl" hidden/>
                                    </label>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </content>
            <footer class="lh100 font15 flex tac">
                <div class="flex1 col9 bw tap bind_page" data-index='1'>上一步</div>
                <div class="flex1 bgc1 colw btn_tap bind_page" data-index='3'>下一步</div>
            </footer>
        </section>
    </article>
    <article class="page page3 dpn">
        <section class="bigBox">
            <content class="container">
                <div class="ptb40 flex_aj"><img src="../img/ico13.png" style="width: 6.18rem;"></div>
                <div class="plr24">
                    <div class="plr30 bw border-r1 shadow ptb30">
                        <p>商品详情图(5张)</p>
                        <div class="pic_box font0 remarkImgUrl_wrap">
                            <!--<div class="pics carouselImgUrl dib mb24 oh mr20 mr20">-->
                            <!--<img src="../img/test.png">-->
                            <!--<div class="delete">&times;</div>-->
                            <!--</div>-->
                            <form enctype="multipart/form-data" method="post" id="remarkImgUrl_form" class="dib">
                                <label class="a-upload" class="fl" style="position: relative;">
                                    <input type="file" name="files" id="remarkImgUrl" hidden/>
                                </label>
                            </form>
                        </div>
                    </div>
                </div>
            </content>
            <footer class="lh100 font15 flex tac">
                <div class="flex1 col9 bw tap bind_page" data-index='2'>上一步</div>
                <div class="flex1 bgc1 colw btn_tap bind_page" data-index='4'>下一步</div>
            </footer>
        </section>
    </article>
    <article class="page page4 dpn">
        <section class="bigBox">
            <content class="container">
                <div class="ptb40 flex_aj"><img src="../img/ico14.png" style="width: 6.18rem;"></div>
                <div class="plr24">
                    <div class="plr30 bw border-r1 shadow ptb30">
                        <p>分类选择</p>
                        <div class="clearfix classify pt30">
                            <!--<label class="item flex_a">-->
                                <!--<input type="radio" class="radio_item" name="radio">-->
                                <!--<span class="isChecked"></span>-->
                                <!--<cite class="ml10">电子产品</cite>-->
                            <!--</label>-->
                        </div>
                        <label class="flex_a pt20">
                            <span>运费:</span>
                            <input type="number" placeholder="请输入（不输入默认免运费）" class="mlr20 flex1" id="freight">
                            <cite>元</cite>
                        </label>
                    </div>
                </div>
            </content>
            <footer class="lh100 font15 flex tac">
                <div class="flex1 col9 bw tap bind_page" data-index='3'>上一步</div>
                <div class="flex1 bgc1 colw btn_tap bind_page" data-index='5'>保存</div>
            </footer>
        </section>
    </article>
</body>
</html>
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/dlc.js"></script>
<script src="../js/jquery.form.js"></script>
<script>
    var name='',price='',remark='',imgUrl='',carouselImgUrl = [],remarkImgUrl=[],categoryId='',freight='';
    dlc_request('/api/goods/goodsCategoryList',{}, function(res){
        console.log(res);
        if(res.code==1){
            var str = '';
            var res = res.goodsCategoryList;
            for(i in res){
                str+='<label class="item flex_a">'+
                        '<input type="radio" class="radio_item" name="category" value="'+res[i].id+'">'+
                        '<span class="isChecked"></span>'+
                        '<cite class="ml10">'+res[i].name+'</cite>'+
                        '</label>';
            }
            $('.classify').html(str);
        }else{
            dlctipbox.show(res.msg);
        }
    });
    var onOff = 0;
    $('.bind_page').click(function(){
        var index = $(this).data('index');
        console.log(index);
        if(index == 2){
            name = $('#name').val();
            price = $('#price').val();
            remark = $('#remark').val();
            if(isNull(name)){
                dlctipbox.show('请输入商品名称');
            }else if(isNull(price)){
                dlctipbox.show('请输入商品价格');
            }else if(isNull(remark)){
                dlctipbox.show('请输入商品描述');
            }else{
                $('.page'+index).show().siblings().hide();
            }
        }else if(index == 3){
            if(imgUrl==''){
                dlctipbox.show('请上传展示小图一张');
            }else if(carouselImgUrl.length==0){
                dlctipbox.show('至少上传一张轮播图');
            }else{
                $('.page'+index).show().siblings().hide();
            }
        }else if(index == 4){
            if(remarkImgUrl.length==0){
                dlctipbox.show('至少上传一张商品详情图');
            }else{
                $('.page'+index).show().siblings().hide();
            }
        }else if(index == 5){
            categoryId = $('input[name=category]:checked').val();
            freight = $('#freight').val()?$('#freight').val():0;
            console.log(categoryId)
            if(isNull(categoryId)){
                dlctipbox.show('请选择分类');
            }else{
                var data = {
                    categoryId:categoryId,
                    name:name,
                    imgUrl:imgUrl,
                    price:price*100,
                    freight:freight*100,
                    remark:remark,
                    carouselImgUrl:carouselImgUrl.join(','),
                    remarkImgUrl:remarkImgUrl.join(',')
                };
                if(onOff == 1)return false;
                onOff = 1;
                dlc_request('/api/goods/AddGoodsById',data, function(res){
                    console.log(res);
                    if(res.code==1){
                        setTimeout(function(){
                            history.go(-1);
                        },2000);
                    }else{
                        onOff = 0;
                    }
                    dlctipbox.show(res.msg);
                });
            }
        }else{
            $('.page'+index).show().siblings().hide();
        }
    });
    $('#imgUrl').on('change',function(){
        upload_pic('imgUrl_form',function(res){
            console.log(res);
            if(res.code == 1){
                $('.single_pic').html('<img src="'+dlcUrl()+res.data+'" class="mr20"/>');
                imgUrl = res.data;
            }else{
                dlctipbox.show(res.msg);
            }
        });
    });
    $('.page').on('change','#carouselImgUrl',function(){
        if(carouselImgUrl.length==5){
            dlctipbox.show('最多上传5张图');
        }else{
            upload_pic('carouselImgUrl_form',function(res){
                console.log(res);
                if(res.code == 1){
                    carouselImgUrl.push(res.data);
                    refresh_carouselImgUrl();
                }else{
                    dlctipbox.show(res.msg);
                }
            });
        }
    });
    $('.page').on('change','#remarkImgUrl',function(){
        if(remarkImgUrl.length==5){
            dlctipbox.show('最多上传5张图');
        }else{
            upload_pic('remarkImgUrl_form',function(res){
                console.log(res);
                if(res.code == 1){
                    remarkImgUrl.push(res.data);
                    refresh_remarkImgUrl();
                }else{
                    dlctipbox.show(res.msg);
                }
            });
        }
    });
    $('.page').on('click','.delete',function(){
        carouselImgUrl.splice($(this).data('index'),1);
        console.log(carouselImgUrl);
        refresh_carouselImgUrl();
    });
    function refresh_carouselImgUrl(){
        var str = '';
        for(var i in carouselImgUrl){
            str+='<div class="pics carouselImgUrl dib mb24 oh mr20 mr20">'+
                    '<img src="'+dlcUrl()+carouselImgUrl[i]+'">'+
                    '<div class="delete" data-index="'+i+'">&times;</div>'+
        '</div>';
        }
        $('.carouselImgUrl_wrap').html(str+'<form enctype="multipart/form-data" method="post" id="carouselImgUrl_form" class="dib">'+
                '<label class="a-upload" class="fl" style="position: relative;">'+
                '<input type="file" name="files" id="carouselImgUrl" hidden/>'+
        '</label>'+
        '</form>');
    }
    function refresh_remarkImgUrl(){
        var str = '';
        for(var i in remarkImgUrl){
            str+='<div class="pics remarkImgUrl dib mb24 oh mr20 mr20">'+
                    '<img src="'+dlcUrl()+remarkImgUrl[i]+'">'+
                    '<div class="delete" data-index="'+i+'">&times;</div>'+
                    '</div>';
        }
        $('.remarkImgUrl_wrap').html(str+'<form enctype="multipart/form-data" method="post" id="remarkImgUrl_form" class="dib">'+
                '<label class="a-upload" class="fl" style="position: relative;">'+
                '<input type="file" name="files" id="remarkImgUrl" hidden/>'+
                '</label>'+
                '</form>');
    }
</script>






















